<#if jsFrameWork == "jquery">
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>登录</title>
  
  <link rel="stylesheet" th:href="@{/mystatic/bootstrap/css/bootstrap.min-${clientStyleVal}.css}">
  <link rel="stylesheet" th:href="@{/mystatic/css/style.css}">
  
</head>

<body>

    <div class="wrapper" id="loginModel">
		<form class="form-signin">
			<h2 class="form-signin-heading">请登录</h2>
			<input type="text" class="form-control" 
				placeholder="用户名" required="" autofocus="" id='userName'/> <input
				type="password" class="form-control" 
				placeholder="密码" required="" id='password'/> <input type="checkbox"
				value="remember-me" id="rememberMe">
			记住我<br /> <br />
			<button class="btn btn-lg btn-primary btn-block" type="button" id="loginBT">登录</button>
		</form>
	</div>
  
<script th:src="@{/mystatic/jquery/jquery.min.js}"></script>
<script th:src="@{/mystatic/js/jqAlert.js}"></script>
<script th:src="@{/mystatic/js/ajaxFactory.js}"></script>

<script>
	var basePath = "/${projectName}";

	var user = localStorage.getItem("user");

	if (user != null && user != undefined) {
		$("#userName").val(user.userName);
		$("#userName").val(user.password);
	} 

	$("#loginBT").on("click",function() {
		
		$z.ajaxStrAndJson({
			url : basePath + "/login/doLogin",
			data : {
				userName : $("#userName").val(),
				password : $("#password").val()
			},
			success : function(data) {
				if (data.result == "failed") {
					$.MsgBox.Alert("消息", "用户名或密码错误！");
					return;
				}
	
				var rememberMe = $("#rememberMe").prop("checked");
				//如果点了记住我，则存储到本地
				if (rememberMe) {
					localStorage.setItem("user", {
						userName : userName,
						password : password
					})
				} else {
					localStorage.removeItem("user");
				}
	
				window.location.href = basePath + '/home'
	
			}
		});
		
	
	} );
	
</script>

</body>

</html>
</#if>

<#if jsFrameWork == "vue">
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>登录</title>
  
  <link rel="stylesheet" th:href="@{/mystatic/bootstrap/css/bootstrap.min-${clientStyleVal}.css}">
  <link rel="stylesheet" th:href="@{/mystatic/css/style.css}">
  
</head>

<body>

    <div class="wrapper" id="loginModel">
		<form class="form-signin">
			<h2 class="form-signin-heading">请登录</h2>
			<input type="text" class="form-control" v-model="userName"
				placeholder="用户名" required="" autofocus="" /> <input
				type="password" class="form-control" v-model="password"
				placeholder="密码" required="" /> <input type="checkbox"
				value="remember-me" id="rememberMe" v-model="rememberMe">
			记住我<br /> <br />
			<button class="btn btn-lg btn-primary btn-block" type="button" @click = "login()">登录</button>
		</form>
	</div>

<script th:src="@{/mystatic/jquery/jquery.min.js}"></script>
<script th:src="@{/mystatic/js/jqAlert.js}"></script>
<script th:src="@{/mystatic/js/ajaxFactory.js}"></script>
<script th:src="@{/mystatic/vue/vue.min.js}"></script>

<script>
	var basePath = "/${projectName}";

	var user = localStorage.getItem("user");

	var userName = '';
	var password = '';
	
	if (user != null && user != undefined) {
		userName = user.userName;
		password = user.password;
	} 

	var loginVue = new Vue({
		el : "#loginModel",
		data : {
			userName : userName,
			password : password,
			rememberMe : ''
		},
		methods : {
			login : function() {
				$z.ajaxStrAndJson({
					url : basePath + "/login/doLogin",
					data : {
						userName : this.userName,
						password : this.password
					},
					success : function(data) {
						if (data.result == "failed") {
							$.MsgBox.Alert("消息", "用户名或密码错误！");
							return;
						}

						//如果点了记住我，则存储到本地
						if (this.rememberMe) {
							localStorage.setItem("user", {
								userName : this.userName,
								password : this.password
							})
						} else {
							localStorage.removeItem("user");
						}

						window.location.href = basePath + '/home'

					}
				});
			}
		}
	});
</script>


</body>

</html>
</#if>
